<template>
  <div class="main" :style="[{ backgroundImage: recommend.bgUrl }]">
    <h1 :style="[{ color: recommend.color }]">{{recommend.text}}</h1>
    <div :style="[{ backgroundColor: recommend.backgroundColor,color: recommend.color}]" @click="moreGoods(recommend)">
      <span>查看全部</span>
      <i-icon type="enter" :color="recommend.color" />
    </div>
  </div>
</template>

<script>
export default {
  props: ['recommend'],
  methods: {
    moreGoods (recommend) {
      wx.navigateTo({
        url: `/pages/filters/main?type=${recommend.type}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  width: 750rpx;
  height: 260rpx;
  background-size: contain;
  background-color: #fff;
  h1{
    color: #8BA0B6;
    font-size: 18px;
    text-align: center;
    padding-top: 70rpx;
  }
  div{
    width: 240rpx;
    height: 56rpx;
    margin: 20rpx auto;
    text-align: center;
    line-height: 56rpx;
    i-icon{
      vertical-align:bottom;
    }
    span{
      vertical-align:middle;
    }
  }
}
</style>
